<template>
    <view class="location-input-container">
        <!-- 标题栏 -->
        <view class="header">
            <view class="back-button" @click="goBack">
                <u-icon name="arrow-left" color="#333" size="20"></u-icon>
                <text>返回</text>
            </view>
            <text class="page-title">地理位置记录</text>
            <view class="placeholder"></view>
        </view>

        <!-- 表单内容 -->
        <view class="form-container">
            <!-- 当前位置 -->
            <view class="input-group">
                <text class="input-label">当前位置</text>
                <view class="location-info">
                    <view class="address-display">
                        <u-icon name="map" color="#2196F3" size="22"></u-icon>
                        <text v-if="locationData.address">{{ locationData.address }}</text>
                        <text v-else class="placeholder-text">未获取位置信息</text>
                    </view>
                    <u-button type="primary" size="mini" @click="getCurrentLocation"
                        :customStyle="{ backgroundColor: '#2196F3' }">获取位置</u-button>
                </view>
                <view class="coordinates-info" v-if="locationData.latitude && locationData.longitude">
                    <text>纬度: {{ locationData.latitude }}</text>
                    <text>经度: {{ locationData.longitude }}</text>
                </view>
            </view>

            <!-- 地图显示 -->
            <view class="input-group map-container">
                <text class="input-label">位置地图</text>
                <view class="map-placeholder" v-if="!locationData.latitude">
                    <u-icon name="map-fill" color="#e0e0e0" size="60"></u-icon>
                    <text>获取位置后显示地图</text>
                </view>
                <map v-else class="location-map" :latitude="locationData.latitude" :longitude="locationData.longitude"
                    :markers="markers" scale="14"></map>
            </view>

            <!-- 环境信息 -->
            <view class="input-group">
                <text class="input-label">所处环境</text>
                <u-radio-group v-model="locationData.environment">
                    <u-radio label="室内" name="indoor"></u-radio>
                    <u-radio label="室外" name="outdoor"></u-radio>
                </u-radio-group>
            </view>

            <!-- 环境标签 -->
            <view class="input-group">
                <text class="input-label">环境标签</text>
                <view class="env-tags">
                    <view v-for="(tag, index) in environmentTags" :key="index" class="env-tag"
                        :class="{ active: locationData.envTags.includes(tag.value) }" @click="toggleTag(tag.value)">
                        <text>{{ tag.label }}</text>
                    </view>
                </view>
            </view>

            <!-- 停留时长 -->
            <view class="input-group">
                <text class="input-label">预计停留时长</text>
                <u-dropdown>
                    <u-dropdown-item v-model="locationData.stayDuration" :title="stayDurationText"
                        :options="stayDurations"></u-dropdown-item>
                </u-dropdown>
            </view>

            <!-- 环境污染评分 -->
            <view class="input-group">
                <text class="input-label">环境污染程度评分</text>
                <u-rate v-model="locationData.pollutionLevel" count="5" active-color="#2196F3"></u-rate>
                <view class="input-tips">
                    <text>1星表示环境污染严重，5星表示环境非常干净</text>
                </view>
            </view>

            <!-- 备注 -->
            <view class="input-group">
                <text class="input-label">位置备注</text>
                <u-textarea v-model="locationData.notes" placeholder="填写当前环境的其他相关信息..." count
                    maxlength="200"></u-textarea>
            </view>

            <!-- 记录日期 -->
            <view class="input-group">
                <text class="input-label">记录日期</text>
                <u-datetime-picker v-model="locationData.recordDate" mode="date"></u-datetime-picker>
            </view>
        </view>

        <!-- 提交按钮 -->
        <view class="submit-section">
            <u-button type="primary" text="保存记录" :customStyle="{ backgroundColor: '#2196F3' }"
                @click="saveRecord"></u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            locationData: {
                latitude: '', // 纬度
                longitude: '', // 经度
                address: '', // 地址
                environment: 'indoor', // 环境类型
                envTags: [], // 环境标签
                stayDuration: '1-3h', // 停留时长
                pollutionLevel: 3, // 环境污染程度
                notes: '', // 备注
                recordDate: new Date().toISOString() // 记录日期
            },
            markers: [], // 地图标记
            environmentTags: [
                { value: 'home', label: '家' },
                { value: 'office', label: '办公室' },
                { value: 'school', label: '学校' },
                { value: 'hospital', label: '医院' },
                { value: 'restaurant', label: '餐厅' },
                { value: 'park', label: '公园' },
                { value: 'shopping', label: '商场' },
                { value: 'gym', label: '健身房' },
                { value: 'traffic', label: '交通中' },
                { value: 'travel', label: '旅行' },
                { value: 'friends', label: '朋友家' },
                { value: 'other', label: '其他' }
            ],
            stayDurations: [
                { value: '&lt;1h', label: '不到1小时' },
                { value: '1-3h', label: '1-3小时' },
                { value: '3-8h', label: '3-8小时' },
                { value: '8-16h', label: '8-16小时' },
                { value: '&gt;16h', label: '超过16小时' }
            ]
        }
    },
    computed: {
        stayDurationText() {
            const selected = this.stayDurations.find(item => item.value === this.locationData.stayDuration);
            return selected ? selected.label : '请选择停留时长';
        }
    },
    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },
        // 获取当前位置
        getCurrentLocation() {
            uni.showLoading({
                title: '定位中...'
            });

            uni.getLocation({
                type: 'gcj02',
                success: res => {
                    this.locationData.latitude = res.latitude;
                    this.locationData.longitude = res.longitude;

                    // 设置地图标记
                    this.markers = [{
                        id: 1,
                        latitude: res.latitude,
                        longitude: res.longitude,
                        width: 30,
                        height: 30,
                        iconPath: '../../static/input/位置标记.png'
                    }];

                    // 获取详细地址
                    this.getAddressFromLocation(res.latitude, res.longitude);
                },
                fail: err => {
                    console.error('获取位置失败', err);
                    uni.showToast({
                        title: '获取位置失败，请检查授权',
                        icon: 'none'
                    });
                },
                complete: () => {
                    uni.hideLoading();
                }
            });
        },
        // 根据经纬度获取地址
        getAddressFromLocation(latitude, longitude) {
            // 这里应该调用地图服务API获取详细地址
            // 由于uniapp中直接使用地图API可能需要额外配置，这里模拟一个地址
            setTimeout(() => {
                this.locationData.address = '模拟地址：XX省XX市XX区XX街道';
            }, 500);

            // 实际项目中，可以使用类似以下代码：
            /*
            uni.request({
              url: 'https://api.map.baidu.com/geocoder/v2/',
              data: {
                location: `${latitude},${longitude}`,
                output: 'json',
                ak: 'YOUR_BAIDU_MAP_KEY'
              },
              success: res => {
                if (res.data && res.data.result) {
                  this.locationData.address = res.data.result.formatted_address;
                }
              }
            });
            */
        },
        // 切换环境标签
        toggleTag(tagValue) {
            const index = this.locationData.envTags.indexOf(tagValue);
            if (index === -1) {
                this.locationData.envTags.push(tagValue);
            } else {
                this.locationData.envTags.splice(index, 1);
            }
        },
        // 保存记录
        saveRecord() {
            // 验证是否有位置信息
            if (!this.locationData.latitude || !this.locationData.longitude) {
                uni.showToast({
                    title: '请先获取位置信息',
                    icon: 'none'
                });
                return;
            }

            // 处理数据保存
            console.log('保存地理位置数据:', this.locationData);

            // TODO: 调用API保存数据

            // 显示成功提示
            uni.showToast({
                title: '记录保存成功',
                icon: 'success',
                success: () => {
                    // 延迟返回
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                }
            });
        }
    }
}
</script>

<style lang="scss">
$location-blue: #2196F3;

.location-input-container {
    min-height: 100vh;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
}

.header {
    height: 100rpx;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.back-button {
    display: flex;
    align-items: center;
    font-size: 28rpx;

    text {
        margin-left: 6rpx;
    }
}

.page-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.placeholder {
    width: 80rpx;
}

.form-container {
    flex: 1;
    padding: 30rpx;
}

.input-group {
    margin-bottom: 40rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.input-label {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 16rpx;
    display: block;
    font-weight: bold;
}

.input-tips {
    margin-top: 10rpx;

    text {
        font-size: 24rpx;
        color: #999;
    }
}

.location-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16rpx;

    .address-display {
        flex: 1;
        display: flex;
        align-items: center;

        u-icon {
            margin-right: 10rpx;
        }

        text {
            font-size: 28rpx;
            color: #333;
        }

        .placeholder-text {
            color: #999;
        }
    }
}

.coordinates-info {
    margin-top: 10rpx;
    padding: 10rpx;
    background-color: #f5f5f5;
    border-radius: 8rpx;

    text {
        font-size: 24rpx;
        color: #666;
        margin-right: 20rpx;
    }
}

.map-container {
    height: 400rpx;
}

.location-map {
    width: 100%;
    height: 320rpx;
    border-radius: 8rpx;
}

.map-placeholder {
    width: 100%;
    height: 320rpx;
    border-radius: 8rpx;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text {
        margin-top: 16rpx;
        font-size: 28rpx;
        color: #999;
    }
}

.env-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 10rpx 0;

    .env-tag {
        padding: 10rpx 20rpx;
        background-color: #f5f5f5;
        border-radius: 50rpx;
        margin: 10rpx;
        transition: all 0.2s;
        border: 2rpx solid transparent;

        &.active {
            background-color: rgba($location-blue, 0.1);
            border-color: $location-blue;

            text {
                color: $location-blue;
            }
        }

        text {
            font-size: 26rpx;
            color: #666;
        }
    }
}

.submit-section {
    padding: 30rpx;
    margin-bottom: 30rpx;
}
</style>